<template>
  <transition name="dialog">
        <div 
            v-if="showDialog"
            id="dialog-bg"
            @scroll.prevent
            @touchmove.prevent >
            <div id="dialog" >
                <div id="info">
                    <div>
                        <p>选择月份</p>
                        <a  @click="confirm" ><img  src="./images/勾.png" alt=""></a>
                    </div>
                </div>
                <div id="time-picker">
                    <div id="year-picker">
                        <select name="" id="year-picker-select" v-model="myYear">
                            <option v-for="(year,index) in years" :key="index"  :value="year">{{year}}</option>
                        </select>
                    </div>
                    <div style="line-height:20vh;display:inline-block;font-size:20px;width:15vw;text-align:left">年</div>
                    <div id="year-picker">
                        <select name="" id="year-picker-select" v-model="myMonth"  >
                            <option v-for="(month,index) in months" :key="index" :value="month">{{month}}</option>
                        </select>
                    </div>
                    <div style="line-height:20vh;display:inline-block;font-size:20px;width:15vw;text-align:left">月</div>
                </div>
                
                
            </div>
        </div>
    </transition>
</template>

<script>

const dd = new Date();
export default {
    name:'MyDialog',
    props:{
            showDialog: Boolean,
        },
    data() {
            return {
                years:['2018','2019','2020','2021','2022','2023','2024','2025','2026'],
                months:['1','2','3','4','5','6','7','8','9','10','11','12'],
                myYear:localStorage.getItem('myDate')?JSON.parse(localStorage.getItem('myDate')).myYear:dd.getFullYear()+'',
                myMonth:localStorage.getItem('myDate')?JSON.parse(localStorage.getItem('myDate')).myMonth:(dd.getMonth()+1)+'',
            }
        },

        
    methods: {
        confirm: function(){
            const Timedata = {
                myYear:this.myYear,
                myMonth:this.myMonth,
            };
            localStorage.setItem('myDate',JSON.stringify(Timedata));
            this.$store.dispatch('HomePage/getInfo',{year:this.myYear,month:this.myMonth});
            this.$emit('closeMyDialog')
        }
    },
    
    watch:{
        myYear(){
            this.$store.commit('HomePage/UPDATEYEAR',this.myYear);
        },
        myMonth(){
            this.$store.commit('HomePage/UPDATEMONTH',this.myMonth);
        }
    }
}
</script>

<style scoped>
* {
        box-sizing: border-box;
    }
    
    #dialog-bg{
        top: 0;
        left: 0;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.5);
        z-index: 98;
    }
    
    #dialog{
        position: fixed;
        bottom: 0;
        background-color: #FFFFFF;
        height: 25vh;
        width: 100vw;
    }
    
    /* 适配电脑等大屏幕 */
    @media (min-width: 750px) {
        #dialog{
            width: 500px;
            left:0;
            right:0;
            margin:0 auto;
        }
    }

    #info{
        height:5vh;
        width:100vw;
        background: royalblue;
        padding-left: 5px;
        padding-right: 10px;
        position:relative;
    }

    #info p{
        color: white;
        left: 5px;
        line-height: 2vh;
        display: inline-block;
        position: relative;
    }
    
    #info a{
        position: relative;
        float: right;
        margin-top: 1vh;
        display: block;
        line-height: 5vh;
    }

    #info a img{
        height: 3vh;
        width: auto;
    }

   #time-picker{
        height: 20vh;
        margin: 0 10vw 2vh 15vw;
        /* background-color: aqua; */
        text-align: left;
   }

   #year-picker{
        display: inline-block;
        width: 20vw;
        line-height: 20vh;
        font-size: 20px;
   }

   #yaer-picker-select{
        overflow: auto;
        height: 5vh;
        
   }
    
   #year-picker li{
        float: left;
        display: block;
        font-size: larger;
        
        
   }
    
    .dialog-enter-active, .dialog-leave-active {
        transition: all .5s;
    }
    
    .dialog-enter, .dialog-leave-to {
        opacity: 0;
        transform: translateY(300px);
    }
</style>